import React    from 'react';
import ReactDOM from 'react-dom';
import Modal   from './modal.js';

class CommentBox extends React.Component{
  constructor(props) {
    super(props);
  }
    render() {
    return (
      <div className="commentBox">
        Hello! I am test. testModel2.
        <NewButton></NewButton>
      </div>
    );
    }
};

class NewButton extends React.Component{
  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false,
    };
  }

  _openModal1() {
    this.setState({modalOpen: true});
  }

  _closeModal1() {
    this.setState({modalOpen: false});
  }

  _onComfirm1() {
    this.setState({modalOpen: false});
  }

  render() {
    return (
      <div>
        <button className="NewButton" onClick={this._openModal1.bind(this)}>开启弹窗最新</button>

            <Modal visible={this.state.modalOpen} 
                onClose={this._closeModal1.bind(this)}
                 onComfirm={this._onComfirm1.bind(this)}
                       // showMask={true}
                >                   
                    <div className="rodal-body"><div>新的内容</div>
                      <div><span>姓名：</span><input/></div>
                      <div><span>电话：</span><input/></div>
                    </div> 
            </Modal>
      </div>
    );
  }
}


// class Mybody extends Modalbody{
//     //子类重写
//    render(){
//          return (
//             <div className="body"><div>新的内容</div>
//             <div><span>姓名：</span><input/></div>
//             <div><span>电话：</span><input/></div>
//             </div>
//         )
        
//     }    
// }

ReactDOM.render(
    <CommentBox />,
    document.getElementById('app')
);